<template>
  <el-container>
    <el-main>
      <el-form el-form ref="form" :model="searchList" label-width="80px">
        <el-row>
          <el-col :span="3">
            <el-form-item label="姓名">
              <el-input v-model="searchList.uname"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="性别">
              <el-select v-model="searchList.sex" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--
          <el-col :span="3">
            <el-form-item label="手机">
              <el-input v-model="searchList.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="身份证号">
              <el-input v-model="searchList.IDCard"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="部门">
              <el-select v-model="form.dept" placeholder="部门">
                <el-option label="开发" value="1"></el-option>
                <el-option label="运维" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          -->
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <!-- <el-table :data="Data">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table> -->

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

        <el-table-column prop="name" label="员工名称" width="120">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="80 "
          :formatter="formatterSex"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="140">
        </el-table-column>
        <el-table-column prop="address" label="住址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remake" label="详细信息" width="120">
        </el-table-column>
        <el-table-column prop="education" label="学历" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >详细/编辑</el-button
            >

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改员工信息" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input> </el-form-item
            ></el-col>

            <el-col :span="8">
              <el-form-item label="身份证">
                <el-input v-model="form.cardNum"></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="form.sex" placeholder="性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="民族">
                <el-input v-model="form.race"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="学历">
                <el-input v-model="form.education"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="手机">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input v-model="form.tel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="政治面貌">
                <el-input v-model="form.party"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="qq号码">
                <el-input v-model="form.qqNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="联系地址">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮政编码">
                <el-input v-model="form.postCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="爱好">
                <el-input v-model="form.hobby"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所学专业">
                <el-input v-model="form.speciality"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" style="width: 80%">
            <el-input type="textarea" v-model="form.remake"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleEditCancel">取 消</el-button>
          <el-button type="primary" @click="handleEditCommit">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>

    <!-- 页脚分页 -->
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "YuanGong",
  data() {
    return {
      allData: [],
      tableData: [],
      page: 1, //页脚显示的当前页
      size: 10, //一页多少条数据
      total: 400, //总条目数

      multipleSelection: [], //当前选中的行

      searchList: {
        //搜索条件的
        name: "",
        uclass: "",
        IDCard: "",
        phone: "",
        sex: "",
        dept: "",
      },
      dialogFormVisible: false, //弹出的修改表单
      form: {
        id: 1,
        name: "",
        sex: "",
        phone: "",
        cardNum: "",
        education: "",
        address: "",
        postCode: "",
        tel: "",
        qqNum: "",
        email: "",
        party: "",
        race: "",
        speciality: "",
        hobby: "",
        remake: "",
      },
      formLabelWidth: "120px", //宽度
    };
  },
  methods: {
    //分页表格数据
    getTableData() {
      //allData为全部数据
      this.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.allData.length; //总条目等于allDaTa长度
    },
    //size改变时的回调，参数为当前的size
    handleSizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条", val);
      this.size = val;
      this.page = 1; //size改变时要把page重置为1，再把参数赋值给size，因为size改变会导致page数量改变
      this.getTableData();
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      // console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTableData();
    },

    //请求所有的员工详细信息
    getAllEmployeeDetails() {
      this.$request.get("employee-details/queryAll").then((res) => {
        // console.log(res);
        if (res.data.obj != null) {
          // console.log(res.data.obj);
          this.allData = res.data.obj;
          // console.log(this.allData);
          this.getTableData(); //获取信息后更新表单数据
        } else {
          this.$message.error("信息获取失败");
        }
      });
    },

    //将后端传来的 1 2 转化为男  女
    formatterSex(row, column) {
      if (row.sex == 1) {
        return "男";
      } else if (row.sex == 2) {
        return "女";
      } else {
        return "人妖";
      }
    },
    reset() {
      this.getAllEmployeeDetails();
      this.searchList = {};
    },
    search() {
      console.log(this.searchList);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form = row;
    },
    handleEditCommit() {
      console.log(this.form);
      this.$request.post("employee-details/insert", this.form).then((res) => {
        console.log(res);
        if (res.data.obj) {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.getAllEmployeeDetails();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    handleEditCancel() {
      this.dialogFormVisible = false;
    },

    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  mounted() {
    this.getTableData();
    this.getAllEmployeeDetails();
  },
};
</script>

<style scoped>
.el-header {
  background-color: rgb(42, 53, 66);
  color: #fff;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-col {
  /* background-color: #fff; */
  color: #fff;
}
i {
  font-size: 18px;
}
.fenye {
  position: fixed;
  bottom: 10px;
}
</style>